<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <title>注册登录</title>
</head>

<body>

    <div id="app">
        <div class="container vh-100 d-flex justify-content-center align-items-center pb-5">
            <router-view></router-view>
        </div>
    </div>

    <template id="card">
        <div class="card border-0">
            <div class="card-header bg-white">
                <slot name="header"></slot>
            </div>
            <div class="card-body">
                <slot></slot>
            </div>
            <div class="card-footer bg-white text-center">
                <slot name="footer"></slot>
            </div>
        </div>
    </template>
    <template id="usernameInput">
        <div class="form-group">
            <input type="text" class="form-control" :placeholder="placeholder" :value="username"
                @input="$emit('input',$event.target.value)">
        </div>
    </template>
    <template id="passwordInput">
        <div class="form-group">
            <div class="input-group">
                <input :type="type" class="form-control" :placeholder="placeholder" :value="password"
                    @input="$emit('input',$event.target.value)">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button"
                        @click="isShowPassword=!isShowPassword">{{ showPasswordText }}</button>
                </div>
            </div>
        </div>
    </template>
    <template id="submitButton">
        <div class="form-group">
            <button type="button" class="btn btn-primary form-control" :disabled="disabled"
                @click="$emit('click')">{{text}}</button>
        </div>
    </template>

    <template id="cardForm">
        <form>
            <username-input placeholder="请输入用户名" v-model="username"></username-input>
            <password-input placeholder="请输入密码" v-model="password" :key='key'></password-input>
            <submit-button :text="btnText" :disabled="isDisabledSubmit" @click="$emit('click',username,password)">
            </submit-button>
        </form>
    </template>

    <template id="registPage">
        <card>
            <template v-slot:header>
                <h3 class='card-title'>欢迎注册</h3>
            </template>
            <card-form btn-text="注 册" @click="regist" key="regist"></card-form>
            <template v-slot:footer>
                <router-link class="btn btn-linke text-secondary" to="/login">如果您已注册账户，请点击此处登录</router-link>
            </template>
        </card>
    </template>
    <template id="loginPage">
        <card>
            <template v-slot:header>
                <h3 class='card-title'>欢迎登录</h3>
            </template>
            <card-form btn-text="登 录" @click="login" key="login"></card-form>
            <template v-slot:footer>
                <router-link class="btn btn-linke text-secondary" to="/regist">如果您未注册账户，请点击此处注册</router-link>
            </template>
        </card>
    </template>
    <template id="indexPage">
        <div>
            <h1 class="border-bottom pb-2">您好，{{user.username}}</h1>
            <div class="text-center">
                <router-link class="btn btn-link text-secondary" to="/login">点击此处退出</router-link>
            </div>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        const user = { username: '', password: '' }

        Vue.component('card', {
            template: '#card'
        })
        Vue.component('usernameInput', {
            model: {
                prop: 'username',
                event: 'input'
            },
            props: {
                username: {
                    default: ''
                },
                placeholder: {
                    default: ''
                }
            },
            template: '#usernameInput'
        })
        Vue.component('passwordInput', {
            model: {
                prop: 'password',
                event: 'input'
            },
            props: {
                password: {
                    default: ''
                },
                placeholder: {
                    default: ''
                }
            },
            data: function () {
                return {
                    isShowPassword: false
                }
            },
            computed: {
                showPasswordText: function () {
                    return this.isShowPassword ? '隐藏' : '显示'
                },
                type: function () {
                    return this.isShowPassword ? 'text' : 'password'
                }
            },
            template: '#passwordInput'
        })
        Vue.component('submitButton', {
            props: {
                disabled: {
                    default: false
                },
                text: {
                    default: ''
                }
            },
            template: '#submitButton'
        })

        Vue.component('cardForm', {
            props: {
                btnText: {
                    default: '按 钮'
                },
                key: {
                    default: ''
                }
            },
            data: function () {
                return {
                    username: '',
                    password: ''
                }
            },
            computed: {
                isDisabledSubmit: function () {
                    return this.username.length == 0 || this.password.length == 0
                }
            },
            template: '#cardForm'
        })

        const registPage = {
            methods: {
                regist(username, password) {
                    user.username = username
                    user.password = password
                    alert('注册成功')
                    router.push({ path: '/login' })
                }
            },
            template: '#registPage'
        }
        const loginPage = {
            methods: {
                login(username, password) {
                    if (username == user.username && password == user.password) {
                        router.push({ path: '/index' })
                    } else {
                        alert('登陆失败')
                    }
                }
            },
            template: '#loginPage'
        }
        const indexPage = {
            data: function () {
                return {
                    user: user
                }
            },
            template: '#indexPage'
        }

        const router = new VueRouter({
            routes: [
                { path: '/regist', component: registPage },
                { path: '/login', component: loginPage },
                { path: '/index', component: indexPage },
            ]
        })

        let app = new Vue({
            router: router,
            el: '#app',
        })
    </script>
</body>

</html>